.FormControl {
  position: relative;
  display: inline-flex;
}

.FormControl__button,
.FormControl__select,
.FormControl__input {
  width: 100%;
  appearance: none;
  background: transparent;
  font: var(--font-secondary-bold);
  color: var(--text-secondary);
  padding: 0 var(--space-lg);
  border: none;
  outline: none;
  /* box-shadow: 0 4px 4px rgb(0 0 0 / 25%); */
  transition: color 250ms;
}

.FormControl--small {
  height: 32px;
}

.FormControl__button:focus-visible,
.FormControl__select:focus-visible,
.FormControl__input:focus-visible {
  outline: none;
  box-shadow: var(--accent) 0 0 0 2px inset;
}

.FormControl__select,
.FormControl__input {
  font-size: var(--text-md);
  line-height: var(--space-md);
}

.FormControl__input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.FormControl__button:disabled,
.FormControl__select:disabled,
.FormControl__input:disabled {
  cursor: default;
  color: var(--text-secondary);
  opacity: 0.5;
}

.FormControl--clearable > input {
  padding-inline-end: 40px;
}

.FormControl--hasSideButton > input {
  padding-inline-end: 64px;
}

.FormControl--hasLeftButton > input {
  text-indent: 16px;
}

.FormControl--select > select {
  cursor: pointer;
  padding-inline-end: 40px;
}

.FormControl--segmented > button {
  box-sizing: border-box;
  padding: 0 var(--space-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  text-transform: uppercase;
  font-weight: var(--semibold);
  color: var(--action-icon);
}

.FormControl--segmented > button:not(:disabled):hover {
  color: var(--action-icon-hover);
}

.FormControl--segmented > button:not(.non-important):active,
.FormControl--segmented > button:not(.non-important).active {
  color: var(--action-icon-active);
}

.FormControl--segmented > button:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-inline-start: var(--space-xs);
}

.FormControl--segmented > button:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.FormControl--segmented > button > svg {
  display: block;
}

.FormControl__segmentedFaIcon {
  font-size: var(--text-lg);
  outline: none;
}

.FormControl--small .FormControl__segmentedFaIcon {
  height: 16px;
}

.FormControl__sideButton {
  cursor: pointer;
  font-size: var(--text-lg);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  padding: 0 var(--space-sm);
  border: none;
  outline: none;
  background: none;
  color: var(--text-default);
  border-radius: 10px;
}

.FormControl__leftButton {
  padding: var(--space-2xs) var(--space-2xs) 0 var(--space-2xs);
}

.FormControl__sideButton:focus-visible {
  outline: none;
  box-shadow: var(--accent) 0 0 0 2px inset;
}

.FormControl__caret,
.FormControl__clear {
  padding-inline-end: var(--space-md);
  transition: color 250ms;
}

.FormControl__caret {
  pointer-events: none;
}

.FormControl__clear {
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text-default);
}

.FormControl__clear:hover {
  color: var(--text-hover);
}

.FormControl__clear:active {
  color: var(--accent);
}

.FormControl__input:disabled ~ .FormControl__clear,
.FormControl__input:placeholder-shown ~ .FormControl__clear {
  display: none;
}

.FormControl__select:hover + .FormControl__caret {
  color: var(--text-hover);
}

.FormControl__select:disabled + .FormControl__caret {
  color: var(--text-secondary);
  opacity: 0.5;
}

.FormControl option {
  background: var(--body-background);
}

.FormControl option:checked {
  color: var(--accent);
}

.FormControl__button.small {
  max-width: fit-content;
}

.FormControl--small .FormControl__segmentedFaIcon.brands {
  height: 24px;
  fill: var(--text-default);
}

.FormControl--small .FormControl__segmentedFaIcon.brands.active {
  fill: var(--accent);
}
